<template>
  <div id="container">
    <el-row>
      <el-col :span="20" offset="2">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="收入曲线图" name="curve-chart">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-date-picker
                  type="month"
                  v-model="formInline.searchMonth"
                  value-format="yyyy-MM"
                  placeholder="选择一个月">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="doSearch">查询</el-button>
              </el-form-item>
            </el-form>
            <div id="curve">

            </div>
          </el-tab-pane>
          <el-tab-pane label="收入分类图" name="pie-chart">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-date-picker
                  type="month"
                  v-model="formInline.searchMonth"
                  value-format="yyyy-MM"
                  placeholder="选择一个月">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="doSearch">查询</el-button>
              </el-form-item>
            </el-form>
            <div id="pie">

            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "show",
  data() {
    return {
      activeName: 'curve-chart',
      formInline: {
        keyword: '',
        searchMonth: ''
      }
    }
  },
  created() {

    let nowDate = new Date();
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      day: nowDate.getDate(),
    };
    const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
    this.$set(this.formInline, "searchMonth", dayDate.toString());

  },
  mounted() {
    this.initMyCurveEcharts();
  },
  methods: {
    initMyCurveEcharts() {
      const myChart = this.$echarts.init(document.getElementById('curve'));

      const option = {
        xAxis: {
          type: 'category',
          //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            //data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      };
      let page = {
        type: 'curve',
        uid: this.$store.state.user.uid,
        realName: this.$store.state.user.realName,
        month: this.formInline.searchMonth
      };

      this.$store.dispatch('getUserIncomeMonthChartInfo', page).then(resp => {
        if (resp.code === 200) {
          option.xAxis.data = resp.data.incomeDateList;
          option.series[0].data = resp.data.incomeMoneyList;

          setTimeout(() => {
            //myChart.setOption(option, true);
            myChart.setOption(option, {replaceMerge: ['xAxis', 'series']}, true)
            myChart.hideLoading();
          }, 1000)
        }
      })

      myChart.setOption(option);
    },

    initMyPieEcharts() {
      const myChart = this.$echarts.init(document.getElementById('pie'));

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'right'
        },
        series: [
          {
            name: '收入分类',
            type: 'pie',
            radius: ['40%', '70%'],

            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 300,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            /*
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]*/
            data:[]
          }
        ]
      };

      let page = {
        type: 'pie',
        uid: this.$store.state.user.uid,
        realName: this.$store.state.user.realName,
        month: this.formInline.searchMonth
      };

      this.$store.dispatch('getUserIncomeMonthChartInfo', page).then(resp => {
        if (resp.code === 200) {
          console.log(resp.data);
          let obj = resp.data['incomeCatalogMaps'];
          for(let key in obj){
            console.log(key+"="+obj[key]);
            let tempObj = {
              name: key,
              value: obj[key]
            }
            option.series[0].data.push(tempObj);
          }

          setTimeout(() => {
            //myChart.setOption(option, true);
            myChart.setOption(option, {replaceMerge: ['series']}, true)
            myChart.hideLoading();
          }, 1000)
        }
      })

      myChart.setOption(option);
    },

    handleClick(tab, event) {
      //console.log(tab, event);
      if (tab.index === '0') {
        //显示曲线图
        this.initMyCurveEcharts();
      } else {
        this.initMyPieEcharts();
      }
    },
    doSearch(){
      console.log('执行查询....')
      console.log(this.activeName);
      //console.log(tab.index);
      if (this.activeName === 'curve-chart') {
        //显示曲线图
        this.initMyCurveEcharts();
      } else {
        this.initMyPieEcharts();
      }
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 40px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}

#curve {
  width: 980px;
  height: 480px;
}

#pie {
  width: 980px;
  height: 480px;
}
</style>
